<template>
	<view class="order-container">
		<view class="order-type-select">
			<view class="item" @click="selectByType(-1)">
				<view :class="activeIndex === -1 ? 'btn-active' : 'btn'">全部</view>
				<view :class="activeIndex === -1 ? 'line-bottom' : ''"></view>
			</view>
			<view class="item" @click="selectByType(0)">
				<view :class="activeIndex === 0 ? 'btn-active' : 'btn'">待付款</view>
				<view :class="activeIndex === 0 ? 'line-bottom' : ''"></view>
			</view>
			<view class="item" @click="selectByType(2)">
				<view :class="activeIndex === 2 ? 'btn-active' : 'btn'">待使用</view>
				<view :class="activeIndex === 2 ? 'line-bottom' : ''"></view>
			</view>
			<view class="item" @click="selectByType(4)">
				<view :class="activeIndex === 4 ? 'btn-active' : 'btn'">已完成</view>
				<view :class="activeIndex === 4 ? 'line-bottom' : ''"></view>
			</view>
			<view class="item" @click="selectByType(5)">
				<view :class="activeIndex === 5 ? 'btn-active' : 'btn'">退款/售后</view>
				<view :class="activeIndex === 5 ? 'line-bottom' : ''"></view>
			</view>
		</view>
		<view class="order-list">
			<scroll-view class="" scroll-y="true">
				<block v-for="(item, index) in orderList" :key="index">
					<view class="order-card">
						<view class="header">
							<text class="create-time">下单时间：{{ getYMDHMS(item.created_time) }}</text>
							<text class="order-status success-status">{{ item.order_status | orderFormat}}</text>
						</view>
						<view class="item-list" @click="toOrderDetail(item.order_id)"><OrderItem :itemList="item.carts_info"></OrderItem></view>
						<view class="footer">
							<view class="total-price">
								<text class="label">{{ item.order_status === 0 ? '应付' : '实付' }}：</text>
								<view class="total">
									<text class="unit">￥</text>
									<text class="num">{{ item.pay_price | moneyFormat }}</text>
								</view>
							</view>
							<view class="btn-group">
								<view v-if="item.order_status >= 2" class="btn btn-8389A0">申请售后</view>
								<view v-else-if="item.order_status === 4" class="btn btn-8389A0">评价</view>
								<view v-else-if="item.order_status === 4" class="btn btn-FF5998">再来一单</view>
								<view v-else-if="item.order_status === 0" class="btn btn-FF5998" @click="submitPay(item.order_id)">立即支付</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import OrderItem from '@/pageA/order-item/order-item.vue';
export default {
	components: {
		OrderItem
	},
	data() {
		return {
			activeIndex: -1,
			orderList: []
		};
	},
	
	methods: {
		// 时间戳转时间格式
		getYMDHMS (timestamp) {
		  let time = new Date(timestamp)
		  let year = time.getFullYear()
		  let month = time.getMonth() + 1
		  let date = time.getDate()
		  let hours = time.getHours()
		  let minute = time.getMinutes()
		  let second = time.getSeconds()
	
		  if (month < 10) { month = '0' + month }
		  if (date < 10) { date = '0' + date }
		  if (hours < 10) { hours = '0' + hours }
		  if (minute < 10) { minute = '0' + minute }
		  if (second < 10) { second = '0' + second }
		  return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
		},
		selectByType(activeIndex) {
			this.activeIndex = activeIndex;
			this.page = 1;
			this.orderList.length = 0;
			this.getOrderList();
		},
		toOrderDetail(id) {
			uni.navigateTo({
				url: `/pageA/order-detail/order-detail?id=${id}`
			});
		},
		getOrderList(type) {
			if (this.activeIndex === 'refund') {
				const params = {};
				params.offset = this.page - 1;
				this.$request
					.get({
						url: 'order/refundableList',
						data: {
							...params
						}
					})
					.then(r => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						this.loadingType = r.data.list.length === 10 ? 'more' : 'nomore';
						this.orderList = [...this.orderList, ...r.data.list];
						if (this.orderList.length === 0) {
							// this.getGuessYouLikeProductList();
						}
						this.loading = false;
					})
					.catch(() => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			} else {
				const params = {};
				params.offset = this.page - 1;
				// params.order_status = this.activeIndex === -1 ? '' : this.activeIndex;
				if(this.activeIndex == 0){
					params.status = 'pending'
				} else if(this.activeIndex == 2){
					params.status = 'unused'
				} else if(this.activeIndex == 4){
					params.status = 'unreview'
				} else if(this.activeIndex == 5){
					params.status = 'afterSale'
				}
				this.$request
					.get({
						url: 'order/myOrders',
						data: {
							...params
						}
					})
					.then(r => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						this.loadingType = r.data.list.length === 10 ? 'more' : 'nomore';
						this.orderList = [...this.orderList, ...r.data.list];
						if (this.orderList.length === 0) {
							// this.getGuessYouLikeProductList();
						}
						this.loading = false;
					})
					.catch(() => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			}
		},
		initData() {
			this.page = 1;
			this.orderList.length = 0;
			this.getOrderList();
		},
		submitPay(order_id) {
			this.$request
				.post({
					url: 'order/wxpay',
					data: {
						order_id,
						trade_type:'miniapp'
					}
				})
				.then(r => {
					if (r.status === 1) {
						uni.requestPayment({
							...r.data,
							success: () => {
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								});
								uni.redirectTo({
									url: '/pageA/order/order?state=-1'
								});
							},
							fail: res => {
								uni.showToast({
									icon: 'none',
									title: '取消支付'
								});
							},
							complete: () => {}
						});
					}
				});
		}
	},
	onShow() {
		this.initData();
	}
};
</script>

<style scoped lang="less">
.order-container {
	background-color: #f3f6f8;
	width: 100%;

	.order-type-select {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 58upx;
		padding: 0 32upx;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;

		.item {
			font-size: 30upx;
			display: flex;
			flex-direction: column;

			.btn {
				color: #8389a0;
			}

			.btn-active {
				color: #ff5998;
			}

			.line-bottom {
				width: auto;
				height: auto;
				border-bottom: 6upx solid #ff5998;
				border-radius: 3upx;
			}
		}
	}

	.order-list {
		padding: 20upx 32upx;
		margin-top: 58upx;

		.order-card {
			background-color: #fff;
			box-shadow: 0upx 6upx 20upx 0upx rgba(0, 42, 64, 0.07);
			border-radius: 12upx;
			margin-bottom: 20upx;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 102upx;
				padding: 0 32upx;

				.create-time {
					font-size: 26upx;
					color: #474a58;
				}

				.order-status {
					font-size: 30upx;
				}

				.success-status {
					color: #8389a0;
				}

				.fail-status {
					color: #ffaa37;
				}
			}

			.item-list {
				padding: 0 32upx;
			}

			.footer {
				border-top: 2upx solid #dfe1ec;
				width: 100%;
				height: 90upx;
				padding: 0 32upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.total-price {
					display: flex;
					
					.label {
						font-size: 30upx;
						color: #474a58;
					}

					.total {
						color: #ff5998;

						.unit {
							font-size: 26upx;
						}

						.num {
						}
					}
				}

				.btn-group {
					display: flex;

					.btn {
						width: 160upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						border-radius: 4px;
						font-size: 30upx;

						&:first-of-type {
							margin-right: 20upx;
						}
					}

					.btn-8389A0 {
						color: #8389a0;
						border: 2upx solid #8389a0;
					}

					.btn-FF5998 {
						color: #ff5998;
						border: 2upx solid #ff5998;
					}
				}
			}
		}
	}
}
</style>
